<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 300px;
      height: 300px;
      background-color: lightblue;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>表单输入绑定</h2>

    <!-- <input type="text" :value="value" @input="handInput" /> -->


    <h4>普通的输入框</h4>
    <input type="text" v-model="value">
    <p>value: {{ value }}</p>

    <hr>


    <h4>多行文本框</h4>
    <textarea v-model="textValue"></textarea>
    <p>textValue: {{ textValue }}</p>

    <hr>


    <h4>单选框</h4>
    <input type="radio" value="1" v-model="radioValue">男
    <input type="radio" value="2" v-model="radioValue">女
    <input type="radio" value="3" v-model="radioValue">未知
    <p>radioValue: {{ radioValue }}</p>


    <hr>


    <h4>多选框</h4>
    <!-- 如果一个变量被多个多选框绑定，那么这个变量默认是数组类型 -->
    <input type="checkbox" value="sing" v-model="checkboxValue">唱
    <input type="checkbox" value="dance" v-model="checkboxValue">跳
    <input type="checkbox" value="rap" v-model="checkboxValue">rap
    <input type="checkbox" value="basketball" v-model="checkboxValue">篮球
    <p>checkboxValue: {{ checkboxValue }}</p>


    <!-- 如果一个变量被一个多选框绑定，那么这个变量默认是布尔值类型 -->
    <input type="checkbox" v-model="hasRead" true-value="yes" false-value="no">我已阅读此条款
    <p>hasRead: {{ hasRead }}</p>



    <hr>

    <h4>下拉框</h4>
    <select v-model="selected" multiple>
      <option disabled value="">Please select one</option>
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
    </select>
    <p>selected: {{ selected }}</p>
  </div>


  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;
    createApp({
      data() {
        return {
          value: "abc",
          textValue: "",
          radioValue: "2",
          checkboxValue: [],
          // hasRead: false,
          hasRead: "yes",
          selected: []
        }
      },
      // methods: {
      //   handInput(e) {
      //     // console.log(e.target.value);
      //     this.value = e.target.value;
      //   }
      // }
    }).mount("#app");
  </script>
</body>
</html>